<template>
	<view class="content-box">
		<view class="number">
			抽奖次数: {{lotteryNum}}
		</view>
		<l-dialer
		:prizeList="prizeList"
		@click="click"
		@done="onDone"
		size="350"
		ref="dialer"
	     />
		 <view
		 class="history"
		 @click="onToExchange"
		 hover-class="history-active">
		  	兑换抽奖次数
		  </view>
		<view
		class="history"
		@click="onToHistory"
		hover-class="history-active">
		 	中奖记录
		 </view>
	</view>
</template>

<script>
	/*
	 lotteryNum 抽奖次数
	 colorArr 自定义转盘颜色
	 prizeList 奖品列表
	*/
	export default {
	    data() {
	        return {
				lotteryNum: 0,
				await: false,
				colorArr:{
					prizeBgColors: ['#f42f3f','white'],
					borderColor: '#f42f3f'
				},
	            prizeList: [
	                {
	                    id: 'coupon88',
	                    name: '8.8折',
	                    img: 'https://img11.360buyimg.com/pop/jfs/t1/175718/35/12595/5477/60b660c6Eb850717b/a1cfe750dcdb5b78.png',
	                },
	                {
	                    id: 'coupon900',
	                    name: '900',
	                    img: 'https://img11.360buyimg.com/pop/jfs/t1/190845/9/6092/4489/60b65fe8Ebb8f8284/955da889f6d1c13e.png',
	                },
	                {
	                    id: 'coupon1',
	                    name: '1元',
	                    img: 'https://img11.360buyimg.com/pop/jfs/t1/189927/14/6092/4174/60b66173E23c472ea/44af15a151defca1.png',
	                },
	                {
	                    id: 'apple',
	                    name: '苹果手机',
	                    img: 'https://img11.360buyimg.com/pop/jfs/t1/177670/26/4591/2514/60a25874Ee0e5332a/99c7bdfede732ae4.png'
	                },
	                {
	                    id: 'coupon210',
	                    name: '210元',
	                    img: 'https://img11.360buyimg.com/pop/jfs/t1/124578/12/20170/4429/60b635d8E7089ebb0/7a47d76a2a260cc0.png'
	                },
	                {
	                    id: 'jd100',
	                    name: '100京豆',
	                    img: 'https://img11.360buyimg.com/pop/jfs/t1/162790/37/15087/28046/6062a49aE8f2c10f2/5591ff0ff38a45e2.png',
	                },
	                {
	                    id: 'coupon400',
	                    name: '400元',
	                    img: 'https://img11.360buyimg.com/pop/jfs/t1/177090/2/7001/4535/60b6607aEe9c1db2a/76c67675f547db3f.png'
	                },
	                {
	                    id: 'thanks',
	                    name: '谢谢惠顾',
	                    img: 'https://storage.jd.com/cdn-upload/dialTemplateHeart.png',
	                },
	            ]
	        };
	    },
		onShow(){
			this.getPrizeInfo()
		},
	    methods: {
			onToHistory(){
				this.$Router.push({path: '/pages/tuandui/lotteryhistory'})
			},
	        onDone(index) {
	            const prize = this.prizeList[index]
	            uni.showModal({
	                title: prize.type == 'EMPTY' ? '很遗憾': '恭喜您',
	                content: prize.name
	            })
	        },
	        click(){
				if(this.lotteryNum <= 0 ){
					uni.showToast({
						icon:'none',
						title:'暂无抽奖机会~'
					})
					return
				}
				if(this.await) return
				this.await = true
	            // 奖品的索引
				this.getDrawPrize()
	        },
			onToExchange(){
				this.$Router.push({
					path: '/pages/activity/sign/index'
				})
			},
			getPrizeInfo(){
				this.$http('coupons.getPrizeInfo',{
					UId: uni.getStorageSync('UId')
				})
				.then(res=>{
					this.lotteryNum = res.quantity
					this.prizeList = res.list
				})
			},
			getDrawPrize(){
				this.$http('coupons.getDrawPrize',{
					UId: uni.getStorageSync('UId')
				})
				.then(res=>{
					this.lotteryNum--
					this.$refs.dialer.run(res.index)
					setTimeout(()=>{
						this.await = false
					},3500)
				})
			}
	    }
	}
</script>

<style lang="scss" scoped>
	.content-box{
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 500rpx;
		height: 100vh;
		background:url(https://image.hzwltb69.com/app/date/2023/lotterybgcTwo.jpg) no-repeat;
		background-size: 100% 100%;
		position: relative;
		.number{
			position: absolute;
			top: 30vh;
			right: 15vw;
			// width: 200rpx;
			color: #fff;
			font-size: 32rpx;
		}
		.history{
			width: 400rpx;
			height: 70rpx;
			border-radius: 40rpx;
			background: #ffad00;
			text-align: center;
			line-height: 70rpx;
			font-size: 30rpx;
			color: #fff;
			margin-top: 40rpx;
			transition: all .3s;
		}
	}
	.history-active{
		background: #dd9300 !important;
	}
</style>